本節大綱

• 前言
• 如何在 React 專案設置 ESLint 和 Prettier
• 在App.test.js 檔案中，會顯示 'test' is not defined 的錯誤
• 參考資料
• 結論

前言

這裡是要分享在建立 React 的專案之前，我的第一步一定就是，先安裝 ESLint 和 Prettier 這兩個套件。

利用 ESLint 針對 JavaScript、React 語法的檢查跟 Prettier 對程式碼的格式化，這樣的好處是，可以檢查自己的程式碼是否有撰寫錯誤，對團隊而言，整個團隊程式碼的撰寫風格將會一致，塑造團隊的風格。

如何在 React 專案設置 ESLint 和 Prettier

ESLint 介紹

ESLint 是一個開源的專案，可以幫助您尋找和修正程式碼中的問題。無論您的程式碼是要在瀏覽器還是伺服器執行，又或者是否有使用框架，ESLint 都可以幫助您的程式碼擁有良好的規範。

ESLint 安裝說明

本人喜好使用 Yarn 工具，故後續都會使用 Yarn 來做示範。

• 使用 Create React App (CRA) 建立專案，可依個人喜好，選擇 npx、npm 或 Yarn。至於 CRA 是什麼，後續會再做介紹。
  npx create-react-app my-app
npm init react-app my-app
yarn create react-app my-app
• 安裝 ESLint 套件：yarn add -D eslint
• 執行 ESLint 初始化：yarn eslint --init

以下是在初始化的過程中，會出現以下的詢問選項整理。

// 請選擇第二項，選擇第三項就會有 Airbnb、Google 等規範，要我們選擇。
How would you like to use ESLint?
  To check syntax only
❯ To check syntax and find problems
  To check syntax, find problems, and enforce code style

// 請選擇第一項。
What type of modules does your project use?
❯ JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

// 因為是以 React 做示範，故請選擇 React。
Which framework does your project use?
❯ React
  Vue.js
  None of these

// 依照專案來決定是否要使用 TypeScript。
Does your project use TypeScript? › No / Yes

// 因為 React 是執行在瀏覽器上，故請選擇 Browser。
Where does your code run?
✔ Browser
  Node

// 依個人喜好做選擇，我都選擇 JSON。
What format do you want your config file to be in?
  JavaScript
  YAML
❯ JSON

// 這裡會詢問是否要透過 npm 來安裝 eslint-plugin-react@latest。
// 請選擇 No，因為統一使用 yarn 來安裝。
Would you like to install them now with npm? › No / Yes

• 初始化結束之後，執行此指令：yarn add -D eslint-plugin-react@latest

Prettier 介紹

Prettier 是一個可以針對程式碼的格式執行排版、對齊及格式化的擴充套件，可設定為存檔時自動格式化，不用再浪費時間手動格式化程式碼。同時也能夠統一團隊程式碼風格，並且可以根據團隊規範，去調整相關設定規則。

Prettier 安裝說明

• 安裝 Prettier 套件：yarn add --dev --exact prettier
• 安裝 eslint-config-prettier 套件，其目的為關閉所有不必要或可能 ESLint 與 Prettier 衝突的規則。
  yarn add -D eslint-config-prettier
• 新增 "prettier" 到 "extends" 的陣列裡在您的 .eslintrc.* 檔案 (這裡是 .eslintrc.json)，並且要放在最後一個位置，來覆蓋其他配置(官網說明)。

// 要把 prettier 放在最後面。
{
  "extends": [
    // ...,
    "prettier"
  ]
}

• 安裝 eslint-plugin-prettier 套件，將 Prettier 作為 ESLint 規則運行，並將差異報告為單個 ESLint 問題。
  yarn add -D eslint-plugin-prettier
• 在 .eslintrc.json 檔案調整 ESLint 與 Prettier的警告顯示。

// ESLint 預設警告是紅色 (danger) 顯示。
// Prettier 預設警告也是紅色 (danger) 顯示，不跟 ESLint 混淆，因此改成黃色 (warning) 顯示。 
{
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "warn"
  }
}

• 在 .eslintrc.json 檔案，新增 plugin:prettier/recommended 設定。

{
  ...,
  "extends": ["plugin:prettier/recommended"]
}

• 在您的專案目錄，新增 .prettierrc.* (本人喜好是 .prettierrc.json) 設定檔案，並加上以下格式化的規則。

另外補充說明一點，有些人的 Prettier 配置，會把預設值也寫進去，這時候您會心想，預設值顧名思義就是您不去寫它，這些規則的規範就是已經訂好了，又何必還去把這預設的規則寫出來，經跟資深前輩的詢問啊，二個思考的方向可以去想，第一個您還真的就不用寫，第二個是就是怕官方，突然去改掉這個預設值，屆時整個程式碼的風格就會跑掉，故這點想法。分享給您。

// 其中 jsxSingleQuote，這是指在 jsx 裡也是使用單引號規則。
{
  "printWidth": 100,
  "useTabs": true,
  "singleQuote": true,
  "jsxSingleQuote": true,
  "trailingComma": "all"
}

• 在您的專案目錄，新增 .prettierignore 排除檔案，並加上以下要排除格式化的目錄。

.github
.husky
dist
node_modules

• 在 package.json 檔案新增 prettier and lint 檢查及格式化指令。

"scripts": {
  ...,
  // ...,
  // ESLint 檢查指令
  "lint:check": "eslint --ext=js,jsx src/",
  // ESLint 修正指令，--fix 修正，--ext=.js,.jsx 修正副檔名為 .js,.jsx，src/ 底下全部目錄
  "lint": "eslint --fix --ext=js,jsx src/",
  // prettier 檢查指令
  "format:check": "prettier . --check --ignore-unknown",
  // prettier 格式化指令，. 是全部目錄，--write 是複寫，--ignore-unknown 略過它不認識的檔案
  "format": "prettier . --write --ignore-unknown",
}

在App.test.js 檔案中，會顯示 'test' is not defined 的錯誤

要處理的是在 App.test.js 檔案的錯誤。

很明顯是 testing-library 套件的問題，但是其實要安裝 jest 套件，這個問題才會解決掉。

yarn add -D eslint-plugin-jest

按照官網解說，需在 .eslintrc.json 加上以下：

{
  "plugins": ["jest"]
}

最重要的一步，通過以下方式告訴 ESLint Jest 提供的環境變數：

{
  "env": {
    "jest/globals": true
  }
}

參考資料

• ESLint
• Prettier
• eslint-plugin-jest

結論

透過這篇文章教學，一步一步地告訴您，在寫任何 React 的專案時，要怎麼使用 ESLint 與 Prettier 一起搭配使用又不會互相衝突的教學。

這裡最後再補充一點，曾經也試過上面的教學，但是，都發現管不是 ESLint 或 Prettier 都不會有任何作用，後來發現我的 VS Code 軟體重開就好。

針對此問題，最近問過一些資深前輩，他們的回覆是，正常來講應該是不需要重開的，意思就是馬上改 ESLint 或 Prettier 的配置，VS Code 應該就會馬上有反應這樣，哪這個問題頗羅生門的，歡迎在觀看這篇文章的您，也有碰到或者知道原因在哪裡，也請告訴我，感謝您。